<template>
  <div>
    <el-card>
      <template #header> 修改用户信息 </template>
      <el-descriptions
        class="margin-top"
        title="修改信息"
        :column="3"
        border
      >
        <template #extra>
          <el-button type="primary" :icon="Plus" @click="addMoney" >添加余额</el-button>
          <el-button type="success" :icon="Edit" @click="updatePwd" >修改密码</el-button>
        </template>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon >
                <user />
              </el-icon>
              用户姓名
            </div>
          </template>
          {{userStore.userInfo?.username}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon >
                <iphone />
              </el-icon>
             手机号
            </div>
          </template>
          {{ userStore.userInfo?.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon >
                <Money />
              </el-icon>
              余额
            </div>
          </template>
          <el-tag >
            {{ userStore.userInfo?.money }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon >
                <StarFilled />
              </el-icon>
              邮箱
            </div>
          </template>
          {{ userStore.userInfo?.email }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon >
                <Timer />
              </el-icon>
              创建时间
            </div>
          </template>
          {{ userStore.userInfo?.createAt?.split('T')[0] }}
        </el-descriptions-item>
       
      </el-descriptions>
    </el-card>
  </div>
  <el-dialog v-model="centerDialogVisible" title="修改密码" width="500" center @open="openDialog" >
    <el-form :model="pwdParmas" ref="form" :rules="rules" >
      <el-form-item label="原密码" prop="oldPassword" >
        <el-input v-model="pwdParmas.oldPassword" placeholder="请输入原密码" type="password" show-password ></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword" >
        <el-input v-model="pwdParmas.newPassword" placeholder="请输入新密码" type="password" show-password ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updatePassword">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref , reactive } from 'vue'
import useUserStore from '@/stores/moudels/userStore';
import { postAddBalanceAPI , updateUserPwdAPI } from '@/api/user'
import { User , Money , Iphone , StarFilled , Timer , Plus , Edit } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
let centerDialogVisible = ref(false)
let userStore = useUserStore()
let form = ref(null)
let pwdParmas = reactive({
    oldPassword:'',
    newPassword:''
})
let rules = reactive({
    oldPassword:[
        {required:true,message:'请输入原密码',trigger:'blur'}
    ],
    newPassword:[
        {required:true,message:'请输入新密码',trigger:'blur'},
        {min:6,max:16,message:'密码长度为6-16位',trigger:'blur'}
    ]
})
const openDialog = ()=>{
    form.value.resetFields()
    Object.assign(pwdParmas,{
        oldPassword:'',
    newPassword:''
    })
}
const addMoney = async ()=>{
 await postAddBalanceAPI()
 ElMessage.success('添加成功')
 userStore.getUserInfo()
}
const updatePassword = async ()=>{
    await form.value.validate()
    await updateUserPwdAPI(pwdParmas)
    ElMessage.success('修改成功')
    centerDialogVisible.value = false
    userStore.getUserInfo()
}
//修改密码
const updatePwd = ()=>{
    centerDialogVisible.value = true
}

</script>

<style lang="scss" scoped></style>
